<template>
	<view class="body">
		<view class="uni-input-wrap">
		    <input class="uni-input" confirm-type="search" placeholder="小红帽的故事" />
			<view class="iconfont icon-sousuo icon-sousuo-set"></view>
		</view>
		<view class="search-history-wrap">
			<view class="search-history-top">
				<text>历史记录</text>
				<text class="iconfont icon-shanchu icon-shanchu-set"></text>
			</view>
			<view class="search-history-content">
				<view class="search-history-text" v-for="(item,index) in history" :key="index">{{item}}</view>
			</view>
		</view>
		<view class="hot-search-wrap">
			<view class="hot-search-top">热搜榜</view>
			<view class="hot-search-list" v-for="(item,index) in hot" :key="index">
				<view class="list-item">
					<text class="num">{{index+1}}</text>
					<text>{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				history:["白雪公主","白雪公主","白雪公主","白雪公主","白雪公主"],
				hot:["白雪公主与七个小矮人","白雪公主与七个小矮人","白雪公主与七个小矮人"]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page{
	background-color: #EEEEEE;
}
.body{
	padding: 15px 30px; 
}
.search-history-wrap,.uni-input-wrap,.hot-search-list {
	padding: 0 20px;
}
.uni-input {
	font-size: 16px;
	padding: 0 0;
	padding-right: 10px;
	background-color: #F2F2F2;
}
.uni-input-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #F2F2F2;
	border-radius: 40px;
	border: 1px solid #B3B3B3;
	height: 40px;
}
.search-history-top {
	display: flex;
	height: 60px;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: #6A6A6A;
}
.icon-shanchu-set,.icon-sousuo-set {
	font-size: 20px;
	color: #6A6A6A;
}
.search-history-text {
	display: inline-block;
	padding:3px 10px;
	margin-right: 5px;
	margin-bottom: 5px;
	font-size: 12px;
	color: #555555;
	background-color: #F8F4F4;
	border-radius: 5px;
}
.hot-search-wrap {
	margin-top: 40px;
}
.hot-search-top {
	font-size: 14px;
	color: #F35403;
	font-weight: bolder;
}
.list-item {
	font-size: 14px;
	color: #333333;
	padding-top: 10px;
}

.list-item .num{
	padding-right: 15px;
}
</style>
